{% if mechs %}
    <div class="post" id="roster" style="">
        <div class="postheader">
            <a name="roster"></a>
            <table style="height: 34px;">
                <tr>
                    <td style="padding-top: 7px;">
                        <h1 style="margin-top: 5px; padding-top: 0px; ">Roster</h1>                        
                    </td>
                    <td style="padding-top: 6px;">

                    </td>
                </tr>
            </table>
        </div>
        <div class="postcontent" id="rostercontent" style="display: none;">
            <div style="text-align: left; margin-top: 12px; margin-bottom: 12px;">
                <a id="btnGarageOf" title="Switch to Garage" href="#">Mechs</a>
                <button id="btnToggleRosterViewTable" title="Change View to Table"></button>
                <button id="btnToggleRosterViewGrid" title="Change View to Grid"></button>
                {% if mech.starter %}
                <button id="btnAssignLance" title="Manage Players"></button>
                {% endif %}
                    
                <ul id="mnuAssignLance" style= "position: absolute; margin-top: 0px; z-index: 200;  margin-left: 20px; border: solid #666 1px; display: none; box-shadow:none; width: 130px; background: #000; ">
                   
                    <li><a id="btnAssignLanceAlpha">Assign Alpha lance</a></li>
                    <li><a id="btnAssignLanceBravo" >Assign Bravo lance</a></li>
                    <li><a id="btnAssignLanceCharlie" >Assign Charlie lance</a></li>
                    <li><a id="btnAssignLanceDelta">Assign to Delta lance</a></li>
                    <li><a id="btnAssignReserve">Assign  Reserve</a></li>
                    <li>-</li>
                    <li><a id="btnRemovePlayer" href="#">Kick from Drop</a></li>
                </ul>
                <button id="btnRosterView" title="Change View">Change View</button>

                
                <ul id="mnuRosterView" style= "position: absolute; margin-top: 0px; margin-left: 20px; z-index: 200; border: solid #666 1px; display: none; box-shadow:none; width: 40px; background: #000; ">
                 
                    <li><a id="btnRosterViewTable">Table</a></li>
                    <li><a id="btnRosterViewGrid" >Grid</a></li>
                </ul>
                <button id="btnRosterSort" title="Sort the Roster">Sort the Roster</button>
                 <ul id="mnuRosterSort" style=" position: absolute; z-index: 200; margin-top:2px; width:100px; border: none; display: none; box-shadow:none; border: solid #666 1px; background: black; ">
                     <li><a id="sortbylance" href="#">Sort by lance</a></li>
                     <li><a id="sortbyweight" href="#">Sort by weight</a></li>
                     <li><a id="sortbyname" href="#">Sort by name</a></li>
                     <li><a id="sortbymech" href="#">Sort by 'mech</a></li>
                     <li><a id="sortbyspeed" href="#">Sort by speed</a></li>
                 </ul>
                <a id="btnImportFromSmurfy" href="#" title="Import a Mech from Smurfy">Import</a>
                
                <a href="#" id="uisave" title="Save current 'Mech">Save</a>
                {% if mech.starter %}
                
                {% else %}
                <a id="btnTakeLead" href="#btnTakeLead" title="Take the Drop lead">Lead</a>
                {% endif %}
                
            </div>
        
            
            <table id="tblRoster" style="border-collapse: collapse; display: none;">
                <tr style="padding: 4px;">
                    <th style="height: 38px; width: 20px" class="uisort" id="uisortlance">L</th>
                    <th style="height: 38px; width: 20px" class="uisort" id="uisortweight">T</th>
                    <th style="height: 38px; width: 100px" class="uisort" id="uisortplayer" >Player</th>
                    <th style="height: 38px; width: 80px" class="uisort" id="uisortmech">'Mech</th>
                    <th style="height: 38px; width: 55px" class="uisort" id="uisortspeed">Speed</th>
                    <th style="height: 38px; width: 140px; font-weight: bold;">Weapons</th>
                    <th style="height: 38px; width: 130px; font-weight: bold;">Equipment</th>
                    <th style="height: 38px; width: 130px; font-weight: bold;">Modules</th>
                </tr>        
            {% regroup mechs|dictsort:"lance" by lance as mech_list %}
            {% for lance in mech_list %}
                

                
            {% for m in lance.list|dictsort:"player" %}
                
                    
                <tr {% if mech.starter %}title="Select a player to activate the Manage Players Menu"{% endif %} class="row-roster-table" id="{{m.player|toID}}" name="{{m.player|escapejs}}"  style="margin: 6px; cursor: pointer;">
                    <td class="cell-roster-table" {% if starter == m.player %} style="color: #FF8812;"{% endif %}>
                        <span class="uimechlance cell-roster-table-tooltip" >
                        {% if lance.grouper = "Alpha" %}A{% endif %}
                        {% if lance.grouper = "Bravo" %}B{% endif %}
                        {% if lance.grouper = "Charlie" %}C{% endif %}
                        {% if lance.grouper = "Delta" %}D{% endif %}
                        {% if lance.grouper = "Reserve" %}R{% endif %}
                        </span>
                        
                    </td>
                    <td {% if starter == m.player %} style="color: #FF8812;"{% endif %}>
                        {{ m.weight }}
                    </td>
                    <td class="cell-roster-table">
                    <span class="cell-roster-table-tooltip" {% if starter == m.player %} style="color: #FF8812;"{% endif %}>
                        {{ m.player|escapejs }}
                    </span>
                    {% if starter == m.player %}
                    <!-- span style=" position: relative; top:-5px; left: -3px; color: #FF8812; z-index: 99; font-size: 6px; font-weight: normal  ">
                        &#9733;
                    </span -->
                    {% endif %}
                    </td><td class="cell-roster-table" {% if starter == m.player %} style="color: #FF8812;"{% endif %}>
                    <span style="width:100px;" class="uimechname cell-roster-table-tooltip" >
                        {% if m.mechtype %}{{m.mechtype}}{% else %}n/a{% endif %}
                    </span>
                    </td><td class="cell-roster-table" {% if starter == m.player %} style="color: #FF8812;"{% endif %}>
                    <span style="" class="uispeed cell-roster-table-tooltip">
                        {% if m.speed %}{{m.speed|escapejs}}{% else %}n/a{% endif %}
                    </span>
                    </td><td class="cell-roster-table" {% if starter == m.player %} style="color: #FF8812;"{% endif %}>
                    <span style="" class="uiweapons cell-roster-table-tooltip">
                        {% if m.weapons_as_string %}{{m.weapons_as_string|escapejs}}{% else %}n/a{% endif %}
                    </span>
                    </td><td class="cell-roster-table" {% if starter == m.player %} style="color: #FF8812;"{% endif %}> 
                    
                     
                    <span style="" class="uiequipment cell-roster-table-tooltip">
                        
                       {% if m.equipment_as_string %}
                           {{m.equipment_as_string|escapejs}}
                        {% else %}
                            n/a
                        {% endif %}
                    </span>
                    </td><td class="cell-roster-table" {% if starter == m.player %} style="color: #FF8812;"{% endif %}>
                    <span style="" class="uimodules"  class="cell-roster-table-tooltip">
                                        
                        {% if m.modules_as_string %}
                            {{m.modules_as_string|escapejs}}
                        {% else %}
                            n/a
                        {% endif %}
                    </span>
                    </td>
                </tr>
                    
                
    
            {% endfor %}
            {% endfor %}
            </table>

            <div id="gridRoster" class="div-table" style="padding-left: 5px; display: none;">
                
                    {% regroup mechs|dictsort:"lance" by lance as mech_list %}
                    {% for lance in mech_list %}
                        
                       
                        <div class="div-table-row">
                            <h3 style="margin-top: 10px;margin-bottom: 10px;">{{ lance.grouper }}</h3>
                            {% for m in lance.list|dictsort:"player" %}
                                <div id="mp{{m.player|toID}}" name="{{m.player|escapejs}}" {% if mech.starter %}title="Select a player to activate the Manage Players Menu"{% endif %} class="cell-roster-grid" style="">
                                    <ul style="margin-left: 10px; width: 140px; margin-right: 10px; position: relative; top: -7px; color: #ccc;list-style-position: outside; text-align: center; padding: 0px;">
                                        <li style="font-size: 11px; position: relative; left: -10px;  margin-bottom: 10px; color: #525757;font-weight: bold; list-style-type: none;" class="uivariantname">
                                            <div class="round"  style="margin-left: 6px; width: 130px; background: #000;  ">
                                                <div class="scroller" style="width:130px;" id="mscrl{{m.player|toID}}">
                                                <div class="scroller_frame"  id="mlyr{{m.player|toID}}">
                                                    <div class="scroller_inner"  >
                                                       
                                                        <span
                                                              id="mrpt{{m.player|toID}}"
                                                              class="scroller_content"
                                                              {% if starter == m.player %} style="color: #FF8812;"{% endif %}
                                                        >
                                                             
                                                            {{ m.player|escapejs }}
                                                        </span>
                                                        {% if starter == m.player %}
                                                        <span style=" position: relative; top:-5px; left: -3px; color: #FF8812; z-index: 99; font-size: 6px; font-weight: normal  ">&#9733;</span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                        </li>

                                        <li style="list-style-type: none; padding-right: 10px; font-size: 11px;  padding-bottom: 12px;" class="uimechname">{% if m.mechtype %}{{m.mechtype}}{% else %}'Mech: n/a{% endif %}</li>
                                        <li style="list-style-type: none; padding-right: 10px; font-size: 11px;  margin-bottom: 6px;" class="uispeed">{% if m.speed %}{{m.speed|escapejs}} kph{% else %}Speed: n/a{% endif %}</li>
                                        <li style="list-style-type: none; padding-right: 10px; font-size: 11px; margin-bottom: 6px;" class="uiequipment">{% if m.equipment_as_string %}{{m.equipment_as_string|escapejs}}{% else %}Equipment: n/a{% endif %}</li>
                                        <li style="list-style-type: none; padding-right: 10px; font-size: 11px; margin-bottom: 6px;" class="uiweapons">{% if m.weapons_as_string %}{{m.weapons_as_string|escapejs}}{% else %}Weapons: n/a{% endif %}</li>
                                        <li style="list-style-type: none; padding-right: 10px; font-size: 11px; margin-bottom: 6px;" class="uimodules">{% if m.modules_as_string %}{{m.modules_as_string|escapejs}}{% else %}Modules: n/a{% endif %}</li>
                                </div>
                                
                            {% endfor %}
                        </div>
                         
                    
                {% endfor %}
              
            </div>
   
            <div style="margin-top: 32px; text-align: center;" >
    
     
           
              <hr />
                        {% if drop_totals.total_players %}
           
            Players: {{ drop_totals.active_players }} / {{ drop_totals.total_players }}&nbsp;&nbsp;&#8711;&nbsp;&nbsp;Tonnage: {{ drop_totals.active_tonnage }} / {{ drop_totals.total_tonnage }}
            {% endif %}  
              <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
            </div>
        </div>
    </div>
{% endif %}

